<template>
    <div class="main-container">
        <div style="background-color: #fff; height:100%" id="Information">
            <a-tabs   :lazy-load="true" :default-active-key="1" @change="tabsChange" justify>
                <a-tab-pane title="物料大类" :key="1">
                    <div style="height: 100%">
                        <Categories></Categories>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="物料中类" :key="4">
                    <div style="height: 100%">
                        <CateZhong></CateZhong>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="物料小类" :key="2">
                    <div style="height: 100%">
                        <SmallClass></SmallClass>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="物料列表" :key="3">
                    <div style="height: 100%">
                        <ListMaterials></ListMaterials>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="对接OA存放大地点" :key="5">
                    <div style="height: 100%">
                        <StoreInLargeLocations></StoreInLargeLocations>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="对接OA存放小地点" :key="6">
                    <div style="height: 100%">
                        <StoreLnSmallPlaces></StoreLnSmallPlaces>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue'
import StoreInLargeLocations from './components/StoreInLargeLocations.vue'
import StoreLnSmallPlaces from './components/StoreLnSmallPlaces.vue'
import ListMaterials from './components/ListMaterials.vue'
import SmallClass from './components/SmallClass.vue'
import Categories from './components/Categories.vue'
import CateZhong from './components/CateZhong.vue'
import emitter from '@/hooks/useEventBus'


export default defineComponent({
    name: 'Information',
    components: { ListMaterials, SmallClass, Categories, CateZhong, StoreInLargeLocations, StoreLnSmallPlaces },
    setup() {
        const pageData = reactive({
            tableIndex: "1"
        })
        const tabsChange = (e: string | number) => {
            emitter.emit('window-change')
            if (e === 1) {
                emitter.emit('Categories')
            } else if (e === 2) {
                emitter.emit('SmallClass')
            } else if (e === 3) {
                emitter.emit('ListMaterials')
            } else if (e === 4) {
                emitter.emit('CateZhong')
            } else if (e === 5) {
                emitter.emit('StoreInLargeLocations')
            } else if (e === 6) {
                emitter.emit('StoreLnSmallPlaces')
            }
        }
        return {
            pageData,
            tabsChange
        }
    }
})
</script>
<style scoped lang="less">
.main-container {
    height: 100%;
}
</style>